<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>


    <!-- 页面meta -->
    <meta charset="utf-8">
    <title>人员管理</title>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap 样式文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <!-- 引入字体图标样式 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css">
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> -->
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/pagination.css">
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/pagination.js"></script>
    <script src="${pageContext.request.contextPath}/js/my.js"></script>

    <%--这里使用相对路径识别不了  所以用${pageContext.request.contextPath}--%>
    <%-- --%>


    <title>Document</title>



</head>

<body>




<center> <h1 style="font-size: 80px;border-width:5px;color: rgb(<%=java.lang.Math.round(java.lang.Math.random()*240)%>,<%=java.lang.Math.round(java.lang.Math.random()*240)%>,<%=java.lang.Math.round(java.lang.Math.random()*240)%>);">
  用户信息管理
</h1></center>

<div class="box-body">
    <!-- 数据表格 -->
    <div class="table-box">
        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-danger" title="新建" data-toggle="modal"
                            data-target="#addModal" onclick="resetUserFrom()">新增
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
                <form action="${pageContext.request.contextPath}/gst/chaxu" method="post">
                    用户id号：<input name="id" value="${user.id}">&nbsp&nbsp&nbsp&nbsp
                    用户姓名:<input name="name" value="${user.name}">&nbsp&nbsp&nbsp&nbsp
                    <input class="btn btn-default" type="submit" value="查询">
                </form>
            </div>
        </div>
    </div>

</div>
    <div id="yangshi"  style="float: right">
    <button id="yangshi1" style="background-color:red">表格样式一</button>
    <button id="yangshi2" style="background-color: yellow">表格样式二</button>
    <button id="yangshi3" style="background-color: yellow">表格样式三</button>
    </div>



<%--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal"
        onclick="findUserById(${user.id})">修改
</button>




&nbsp&nbsp&nbsp&nbsp
<button type="button" class="btn btn-warning" onclick="delUser(${user.id})">离职</button>--%>

    <div id="two" style="">
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable text-center">
            <thead>
            <tr  id="dataList1" style="background-color: #00c0ef" class="text-center">
                <th>用户id号</th>
                <th>用户姓名</th>
                <th>用户密码</th>
                <th>创建时间</th>
                <th>更新时间</th>
                <th>操作</th>

            </tr>
            </thead>
            <tbody>
            <c:forEach items="${persondata}" var="nature">
                <tr>
                    <td>${nature.id}</td>
                    <td>${nature.name}</td>
                    <td>${nature.password}</td>
                    <td>${nature.create_time}</td>
                    <td>${nature.update_time}</td>
                    <div style="display: none" ><input type="text" value="${nature.id}" name="userid"></div>
                    <td>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal" onclick="editperson(${nature.id})">修改</button>
                        <button type="button" class="btn btn-warning"data-toggle="modal" data-target="#delModal" onclick="delperson(${nature.id})">删除</button>

                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>

<%--method没有加会导致乱码--%>
        <form action="${pageContext.request.contextPath}/gst/addperson" method="post">
        <!-- 新增窗口 -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel">人员信息</h3>
                    </div>
                    <div class="modal-body">
                        <form id="addUser">
                            <table class="table table-bordered table-striped" width="800px">
                                <tr>
                                 <td>用户姓名</td>
                                    <td><input class="form-control" name="name"></td>
                                </tr>
                                <tr>
                                    <td>用户密码</td>
                                    <td><input type="password" class="form-control" name="password" id="addpassword" ></td>
                                </tr>
                                <tr>
                                    <td>确认密码</td>
                                    <td><input type="password" class="form-control" name="querypassword" id="querypassword"></td>
                                </tr>
                            </table>
                        </form>
                    </div>

                        <button class="btn btn-success"type="submit">保存</button>
                        <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">关闭</button>


                </div>
            </div>
        </div>
        </form>


<form action="${pageContext.request.contextPath}/gst/editperson" method="post">
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabe2">用户信息修改</h3>
            </div>
            <div class="modal-body">
                <form id="editUser">
                    <table class="table table-bordered table-striped" width="800px">
                        <tr>
                           <%-- 设置readonly不可修改--%>
                            <td>用户id</td>
                            <td><input class="form-control" readonly name="uid" id="uid"></td>
                        </tr>
                              <tr>
                         <td>用户姓名</td>
                            <td><input class="form-control"  name="uname" id="uname"></td>
                              </tr>
                                  <tr>
                              <td>用户密码</td>
                               <td><input class="form-control" name="upassword" id="upassword"></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" type="submit">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

</form>



<form action="${pageContext.request.contextPath}/gst/delperson" method="post">
    <!-- 编辑窗口 -->
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                      是否确定删除？
                </div>
                <div style="display: none"><input type="text" id="delid" name="delid"></div>
                <div class="modal-footer">
                    <button class="btn btn-success" type="submit">确定</button>
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">取消</button>
                </div>
            </div>
        </div>
    </div>

</form>




<script>

    function editperson(i)
    {
        $("#uid").val(i);
    }
    function delperson(i)
    {
        $("#delid").val(i);
    }
    function checkVal() {
    // 获取密码和用户名
    var name= $("#addname").val();
    var password = $("#addpassword").val();
    var password1 = $("#querypassword").val();
    if (name== ''||password == ''||password1 == '') {
        alert("输入信息不能为空");
    }
    else if(password!=password1)
    {
        alert("两次密码不相等");
    }
    else
    {

        $("#savemsg").attr("disabled", false);
    }

}


document.getElementById("yangshi1").onclick=function (){
    this.style.backgroundColor="red";
    document.getElementById("yangshi2").style.backgroundColor="yellow";
    document.getElementById("yangshi3").style.backgroundColor="yellow";
    document.getElementById("dataList").className="table table-bordered table-striped table-hover dataTable text-center";
    document.getElementById("dataList1").style.backgroundColor="#00c0ef";

}
document.getElementById("yangshi2").onclick=function (){
    this.style.backgroundColor="red";
    document.getElementById("yangshi1").style.backgroundColor="yellow";
    document.getElementById("yangshi3").style.backgroundColor="yellow";
    document.getElementById("dataList1").style="";
    document.getElementById("dataList").className="table table-bordered table-striped table-dark dataTable text-center";
}
document.getElementById("yangshi2").onclick=function (){
    this.style.backgroundColor="red";
    document.getElementById("yangshi1").style.backgroundColor="yellow";
    document.getElementById("yangshi3").style.backgroundColor="yellow";
    document.getElementById("dataList1").style="";
    document.getElementById("dataList").className="table table-bordered table-striped table-dark dataTable text-center";
}

document.getElementById("yangshi3").onclick=function (){
    this.style.backgroundColor="red";
    document.getElementById("yangshi1").style.backgroundColor="yellow";
    document.getElementById("yangshi2").style.backgroundColor="yellow";
    document.getElementById("dataList1").style="";
    document.getElementById("dataList").className="table  table-bordered table-striped";
}



</script>
</body>

</html>





